<template>  
  <h1>当前的 n 值为: {{sum}}</h1>
  <button @click="sum ++">点我 n + 1</button>
  <br>
  <h2>{{msg}}</h2>
  <button @click="msg += '!' ">点我改变信息</button>
  <br>
  <h2>姓名: {{person.name}}</h2>
  <h2>年龄: {{person.age}}</h2>
  <h2>薪资: {{person.job.j1.salary}}K</h2>
  <button @click="person.name += '@'">点我修改姓名</button>
  <button @click="person.age ++">点我年龄加1</button>
  <button @click="person.job.j1.salary ++">涨薪</button>
</template>

<script>  
import {reactive, ref, watch} from 'vue'
export default {
  name: 'Demo',  
  setup() {  
    let sum = ref(0) 
    let msg = ref('凌宸你好啊')
    let person = reactive({
      name:'张三',
      age: 18,
      job:{
        j1:{
          salary: 20
        }
      }
    })
    // 情况一: 监视 ref 所定义的一个响应式数据
    // watch(sum, (newValue, oldValue) => {
    //   console.log('sum 变了', newValue, oldValue)
    // },{immediate:true})

    // 情况二: 监视 ref 所定义的多个响应式数据
    // watch([sum, msg], (newValue, oldValue) => {
    //   console.log('sum或msg变了', newValue, oldValue)
    // })

    // 情况三: 监视 reactive 所定义的一个响应式数据,
    // 注意:  1.此处无法正确获取 oldValue
    //        2.强制开启了深度监视(deep配置无效)
    // watch(person, (newValue, oldValue) => {
    //   console.log('person 变了', newValue, oldValue)
    // })

    // 情况四: 监视 reactive 所定义的一个响应式数据中的某个属性
    // watch(() => person.age, (newValue, oldValue) => {
    //   console.log('person 的 age 变了', newValue, oldValue)
    // })

    // 情况五: 监视 reactive 所定义的一个响应式数据中的某些属性
    watch([() => person.age, () => person.name], (newValue, oldValue) => {
      console.log('person 的name 或 age 变了', newValue, oldValue)
    })

    // 特殊情况
    watch(() => person.job, (newValue, oldValue) => {
      console.log('person 的 job 变了', newValue, oldValue)
    },{deep:true})


    // 返回一个对象 (常用)
    return {
      sum, msg, person
    } 
  }
}
</script>

